<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑气候数据</title>
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">#}
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>#}

    <link href="{{ url_for('static',filename='bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='bootstrap/bootstrap-icons-1.11.1/bootstrap-icons.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static',filename='jquery/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <style>
        :root {
            --primary-color: #1565C0;
            --secondary-color: #42A5F5;
            --accent-color: #E3F2FD;
            --text-color: #212121;
            --light-text: #757575;
            --light-blue: #E1F5FE;
            --dark-blue: #0D47A1;
            --cyan: #00BCD4;
            --teal: #009688;
            --indigo: #3F51B5;
            --cloud-icon: #81D4FA;
        }

        body {
            background-color: #F5F7FA;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2342a5f5' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
            color: var(--text-color);
            padding: 2rem;
            min-height: 100vh;
        }

        /* 页面标题部分 */
        .page-header {
            margin-bottom: 2.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 1.2rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        }

        .page-title {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 2rem;
            margin-bottom: 0;
            position: relative;
            padding-left: 2.2rem;
        }

        .page-title::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.8rem;
            height: 1.8rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231565C0' d='M19.36 10.27L12 2.91L4.64 10.27C3 11.91 3 14.57 4.64 16.21C6.28 17.85 8.94 17.85 10.58 16.21L12 14.79L13.42 16.21C15.06 17.85 17.72 17.85 19.36 16.21C21 14.57 21 11.91 19.36 10.27M6.05 14.79C5.38 14.12 5.38 13.05 6.05 12.38C6.72 11.71 7.79 11.71 8.46 12.38L9.88 13.8L8.46 15.22C7.79 15.89 6.72 15.89 6.05 14.79M17.95 14.79C17.28 15.46 16.21 15.46 15.54 14.79L14.12 13.37L15.54 11.95C16.21 11.28 17.28 11.28 17.95 11.95C18.62 12.62 18.62 13.69 17.95 14.79Z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
        }

        .site-name {
            font-weight: 600;
            color: var(--dark-blue);
            background-color: var(--light-blue);
            padding: 0.3rem 0.7rem;
            border-radius: 4px;
            margin-left: 0.5rem;
            font-size: 1.3rem;
        }

        .btn-back {
            background-color: white;
            border-color: rgba(0, 0, 0, 0.1);
            color: var(--light-text);
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-back:hover {
            background-color: rgba(0, 0, 0, 0.05);
            color: var(--text-color);
            border-color: rgba(0, 0, 0, 0.2);
        }

        /* 参数部分样式 */
        .parameter-section, .summary-section {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            margin-bottom: 2rem;
            position: relative;
        }

        .parameter-section::before, .summary-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, var(--cyan), var(--secondary-color));
        }

        .parameter-header, .summary-header {
            padding: 1.5rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding-bottom:0;
        }

        .parameter-title, .summary-title {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 0;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
        }

        .parameter-title i, .summary-title i {
            margin-right: 0.5rem;
            color: var(--cloud-icon);
            font-size: 1.35rem;
        }

        .parameter-subtitle, .summary-subtitle {
            color: var(--light-text);
            font-size: 0.9rem;
            margin-top: 0.5rem;
        }

        .parameter-content, .summary-content {
            padding: 1.5rem;
        }

        /* 表格样式 */
        .table-responsive {
            overflow-x: auto;
            margin-bottom: 1rem;
        }

        .parameter-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 8px;
            overflow: hidden;
        }

        .parameter-table th {
            background-color: var(--light-blue);
            color: var(--dark-blue);
            font-weight: 600;
            text-align: center;
            padding: 0.8rem 0.75rem;
            font-size: 0.9rem;
            border-bottom: 2px solid var(--secondary-color);
            white-space: nowrap;
            vertical-align: middle;
            border-right: 1px solid rgba(0, 0, 0, 0.06);
        }

        .parameter-table th:last-child {
            border-right: none;
        }

        .parameter-table td {
            padding: 0.2rem 0.3rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            border-right: 1px solid rgba(0, 0, 0, 0.06);
            vertical-align: middle;
            text-align: center;
            height: 44px;
        }

        .parameter-table td:last-child {
            border-right: none;
        }

        .parameter-table tr:last-child td {
            border-bottom: none;
        }

        .parameter-table tr:hover {
            background-color: rgba(66, 165, 245, 0.1);
        }

        /* 月份列特殊样式 */
        .parameter-table td:first-child {
            font-weight: 500;
            color: var(--primary-color);
            text-align: left;
            padding-left: 1rem;
            background-color: rgba(66, 165, 245, 0.05);
            border-right: 1px solid rgba(0, 0, 0, 0.1);
        }

        .parameter-table th:first-child {
            text-align: left;
            padding-left: 1rem;
            background-color: rgba(66, 165, 245, 0.1);
            border-right: 1px solid rgba(0, 0, 0, 0.1);
            width: 100px;
        }

        .parameter-table th:nth-child(n+2) {
            width: calc((100% - 100px) / 7);
        }

        /* 表格行高度一致性 */
        .parameter-table tr {
            height: 42px;
        }

        /* 交替行背景色 */
        .parameter-table tr:nth-child(even) {
            background-color: rgba(66, 165, 245, 0.03);
        }

        /* 为每种类型的数据列添加轻微的区分色 */
        /* 温度列 */
        .parameter-table th:nth-child(2),
        .parameter-table th:nth-child(3) {
            background-color: rgba(33, 150, 243, 0.1);
        }

        /* 降水列 */
        .parameter-table th:nth-child(4) {
            background-color: rgba(3, 169, 244, 0.1);
        }

        /* 蒸发量列 */
        .parameter-table th:nth-child(5) {
            background-color: rgba(0, 188, 212, 0.1);
        }

        /* 辐射列 */
        .parameter-table th:nth-child(6) {
            background-color: rgba(0, 150, 136, 0.1);
        }

        /* 雨日和霜冻日列 */
        .parameter-table th:nth-child(7),
        .parameter-table th:nth-child(8) {
            background-color: rgba(76, 175, 80, 0.1);
        }

        /* 表格标题栏增强 */
        .parameter-header {
            padding: 1.5rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            background-color: rgba(66, 165, 245, 0.03);
        }

        /* 聚焦的输入栏样式 */
        .parameter-table tr.focused {
            background-color: rgba(66, 165, 245, 0.08);
        }

        /* 修改后的表格行高亮显示 */
        .modified-row {
            background-color: rgba(3, 169, 244, 0.08);
        }

        /* 统计卡片样式 */
        .summary-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            padding: 1.2rem;
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }

        .summary-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }

        .summary-icon {
            background-color: var(--light-blue);
            color: var(--primary-color);
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 1rem;
            font-size: 1.5rem;
        }

        .summary-info {
            flex-grow: 1;
        }

        .summary-label {
            color: var(--light-text);
            font-size: 0.9rem;
            margin-bottom: 0.3rem;
        }

        .summary-value {
            color: var(--dark-blue);
            font-size: 1.4rem;
            font-weight: 700;
        }

        /* 按钮区域样式 */
        .actions-container {
            margin-top: 2rem;
            margin-bottom: 3rem;
            display: flex;
            justify-content: space-between;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(21, 101, 192, 0.3);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: var(--dark-blue);
            border-color: var(--dark-blue);
            box-shadow: 0 4px 12px rgba(21, 101, 192, 0.4);
            transform: translateY(-2px);
        }

        /* 返回顶部按钮 */
        .back-to-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1000;
        }

        .back-to-top.visible {
            opacity: 1;
        }

        .back-to-top:hover {
            background-color: var(--dark-blue);
            transform: translateY(-3px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }

        /* 表格增加滚动阴影提示 */
        .table-responsive::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .table-responsive.scrollable::after {
            opacity: 1;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }

            .page-title {
                font-size: 1.6rem;
            }

            .site-name {
                display: block;
                margin: 0.5rem 0 0;
                width: fit-content;
            }

            .parameter-table th,
            .parameter-table td {
                padding: 0.4rem 0.5rem;
                font-size: 0.85rem;
            }

            .parameter-table input[type="number"] {
                max-width: 80px;
            }

            .actions-container {
                flex-direction: column;
                gap: 1rem;
            }

            .actions-container button {
                width: 100%;
            }

            .summary-card {
                padding: 1rem;
            }

            .summary-icon {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
            }

            .summary-value {
                font-size: 1.2rem;
            }
        }

        /* ========== 输入框样式（整合后最终版） ========== */

        /* 输入框基本样式 */
        .parameter-table input[type="number"] {
            width: 100%;
            max-width: 95%;
            text-align: right;
            padding: 0.25rem 0.5rem;
            font-size: 0.9rem;
            height: 32px;
            border: none; /* 删除默认边框 */
            border-radius: 4px;
            transition: all 0.25s ease;
            margin: 0 auto;
            display: block;
            background-color: transparent;
            box-shadow: none;
        }

        /* 覆盖左侧彩色边框的样式 */
        .parameter-table td:nth-child(n) input[type="number"],
        .parameter-table td:nth-child(n) input[type="number"]:hover,
        .parameter-table td:nth-child(n) input[type="number"]:focus {
            border-left-color: transparent !important; /* 强制移除左侧边框颜色 */
        }

        /* 移除特定字段焦点和悬停时的左侧彩色边框 */
        .parameter-table td:nth-child(2) input:focus,
        .parameter-table td:nth-child(3) input:focus,
        .parameter-table td:nth-child(4) input:focus,
        .parameter-table td:nth-child(5) input:focus,
        .parameter-table td:nth-child(6) input:focus,
        .parameter-table td:nth-child(7) input:focus,
        .parameter-table td:nth-child(8) input:focus,
        .parameter-table td:nth-child(2) input:hover,
        .parameter-table td:nth-child(3) input:hover,
        .parameter-table td:nth-child(4) input:hover,
        .parameter-table td:nth-child(5) input:hover,
        .parameter-table td:nth-child(6) input:hover,
        .parameter-table td:nth-child(7) input:hover,
        .parameter-table td:nth-child(8) input:hover {
            border-left: none;
            border-left-color: transparent !important;
        }

        /* 输入框悬停状态 */
        .parameter-table input[type="number"]:hover {
            border: 1px solid rgba(66, 165, 245, 0.3);
            background-color: rgba(255, 255, 255, 0.6);
        }

        /* 输入框聚焦状态 */
        .parameter-table input[type="number"]:focus {
            border: 1px solid var(--secondary-color);
            background-color: white;
            box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.15);
            outline: none;
        }

        /* 聚焦状态下的输入框样式 */
        .parameter-table input[type="number"].focused {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.25);
        }

        /* 修改后的字段样式 */
        .modified-field {
            border: 1px solid rgba(3, 169, 244, 0.3) !important;
            background-color: rgba(3, 169, 244, 0.05) !important;
        }

        /* 数字输入框的箭头样式优化 */
        .parameter-table input[type="number"]::-webkit-inner-spin-button,
        .parameter-table input[type="number"]::-webkit-outer-spin-button {
            opacity: 0;
            height: 28px;
        }

        .parameter-table input[type="number"]:hover::-webkit-inner-spin-button,
        .parameter-table input[type="number"]:hover::-webkit-outer-spin-button {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container-fluid p-0">
        <!-- 页面标题和返回按钮 -->
        <div class="page-header">
            <h1 class="page-title">编辑站点气候数据<span class="site-name">{{ site.sitename }}</span></h1>
            <button type="button" class="btn btn-back" onclick="window.location.href='{{ url_for('func.mysites') }}'">
                <i class="bi bi-arrow-left"></i> 返回站点列表
            </button>
        </div>

        <form id="editSiteForm" action="{{ url_for('func.editsubmitsite', siteId=site.id) }}" method="post">
            <!-- 气候数据统计摘要部分 -->
            <div class="summary-section">
                <div class="summary-header">
                    <h2 class="summary-title">
                        <i class="bi bi-bar-chart"></i> 气候数据统计
                    </h2>
                    <p class="summary-subtitle">根据表格数据自动生成的摘要统计信息</p>
                </div>
                <div class="summary-content">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="summary-card">
                                <div class="summary-icon">
                                    <i class="bi bi-thermometer-half"></i>
                                </div>
                                <div class="summary-info">
                                    <div class="summary-label">年均温</div>
                                    <div class="summary-value" id="avgTemp">-- ℃</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="summary-card">
                                <div class="summary-icon">
                                    <i class="bi bi-cloud-rain"></i>
                                </div>
                                <div class="summary-info">
                                    <div class="summary-label">年降水量</div>
                                    <div class="summary-value" id="totalPrecip">-- mm</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="summary-card">
                                <div class="summary-icon">
                                    <i class="bi bi-calendar3"></i>
                                </div>
                                <div class="summary-info">
                                    <div class="summary-label">年雨日</div>
                                    <div class="summary-value" id="totalRainDays">-- 天</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="summary-card">
                                <div class="summary-icon">
                                    <i class="bi bi-sun"></i>
                                </div>
                                <div class="summary-info">
                                    <div class="summary-label">年平均辐射</div>
                                    <div class="summary-value" id="avgRadiation">-- MJ/m²</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 气候数据表格部分 -->
            <div class="parameter-section">
                <div class="parameter-header">
                    <h2 class="parameter-title">
                        <i class="bi bi-cloud"></i> 月度气候数据
                    </h2>
                    <p class="parameter-subtitle">编辑站点的月度气候参数数据</p>
                </div>
                <div class="parameter-content">
                    <div class="table-responsive">
                        <table class="parameter-table">
                            <thead>
                                <tr>
                                    <th>月份</th>
                                    <th>最高温 (℃)</th>
                                    <th>最低温 (℃)</th>
                                    <th>降水量 (mm)</th>
                                    <th>蒸发量 (mm)</th>
                                    <th>太阳辐射 (MJ/m²)</th>
                                    <th>雨日 (天)</th>
                                    <th>霜冻日 (天)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>一月</td>
                                    <td><input type="number" step="0.01" required name="tmax1" class="form-control" value="{{ site.tmax1 }}"></td>
                                    <td><input type="number" step="0.01" required name="tmin1" class="form-control" value="{{ site.tmin1 }}"></td>
                                    <td><input type="number" step="0.01" required name="precip1" class="form-control" value="{{ site.precip1 }}"></td>
                                    <td><input type="number" step="0.01" required name="evap1" class="form-control" value="{{ site.evap1 }}"></td>
                                    <td><input type="number" step="0.01" required name="ra1" class="form-control" value="{{ site.ra1 }}"></td>
                                    <td><input type="number" step="0.01" required name="raind1" class="form-control" value="{{ site.raind1 }}"></td>
                                    <td><input type="number" step="0.01" required name="frost1" class="form-control" value="{{ site.frost1 }}"></td>
                                </tr>
                                <tr>
                                    <td>二月</td>
                                    <td><input type="number" step="0.01" required name="tmax2" class="form-control" value="{{ site.tmax2 }}"></td>
                                    <td><input type="number" step="0.01" required name="tmin2" class="form-control" value="{{ site.tmin2 }}"></td>
                                    <td><input type="number" step="0.01" required name="precip2" class="form-control" value="{{ site.precip2 }}"></td>
                                    <td><input type="number" step="0.01" required name="evap2" class="form-control" value="{{ site.evap2 }}"></td>
                                    <td><input type="number" step="0.01" required name="ra2" class="form-control" value="{{ site.ra2 }}"></td>
                                    <td><input type="number" step="0.01" required name="raind2" class="form-control" value="{{ site.raind2 }}"></td>
                                    <td><input type="number" step="0.01" required name="frost2" class="form-control" value="{{ site.frost2 }}"></td>
                                </tr>
                                <tr>
                                    <td>三月</td>
                                    <td><input type="number" step="0.01" required name="tmax3" class="form-control" value="{{ site.tmax3 }}"></td>
                                    <td><input type="number" step="0.01" required name="tmin3" class="form-control" value="{{ site.tmin3 }}"></td>
                                    <td><input type="number" step="0.01" required name="precip3" class="form-control" value="{{ site.precip3 }}"></td>
                                    <td><input type="number" step="0.01" required name="evap3" class="form-control" value="{{ site.evap3 }}"></td>
                                    <td><input type="number" step="0.01" required name="ra3" class="form-control" value="{{ site.ra3 }}"></td>
                                    <td><input type="number" step="0.01" required name="raind3" class="form-control" value="{{ site.raind3 }}"></td>
                                    <td><input type="number" step="0.01" required name="frost3" class="form-control" value="{{ site.frost3 }}"></td>
                                </tr>
                                <tr>
                                    <td>四月</td>
                                    <td><input type="number" step="0.01" required name="tmax4" class="form-control" value="{{ site.tmax4 }}"></td>
                                    <td><input type="number" step="0.01" required name="tmin4" class="form-control" value="{{ site.tmin4 }}"></td>
                                    <td><input type="number" step="0.01" required name="precip4" class="form-control" value="{{ site.precip4 }}"></td>
                                    <td><input type="number" step="0.01" required name="evap4" class="form-control" value="{{ site.evap4 }}"></td>
                                    <td><input type="number" step="0.01" required name="ra4" class="form-control" value="{{ site.ra4 }}"></td>
                                    <td><input type="number" step="0.01" required name="raind4" class="form-control" value="{{ site.raind4 }}"></td>
                                    <td><input type="number" step="0.01" required name="frost4" class="form-control" value="{{ site.frost4 }}"></td>
                                </tr>
                                <tr>
                                    <td>五月</td>
                                    <td><input type="number" step="0.01" required name="tmax5" class="form-control" value="{{ site.tmax5 }}"></td>
                                    <td><input type="number" step="0.01" required name="tmin5" class="form-control" value="{{ site.tmin5 }}"></td>
                                    <td><input type="number" step="0.01" required name="precip5" class="form-control" value="{{ site.precip5 }}"></td>
                                    <td><input type="number" step="0.01" required name="evap5" class="form-control" value="{{ site.evap5 }}"></td>
                                    <td><input type="number" step="0.01" required name="ra5" class="form-control" value="{{ site.ra5 }}"></td>
                                    <td><input type="number" step="0.01" required name="raind5" class="form-control" value="{{ site.raind5 }}"></td>
                                    <td><input type="number" step="0.01" required name="frost5" class="form-control" value="{{ site.frost5 }}"></td>
                                </tr>
                                <tr>
                                    <td>六月</td>
                                    <td><input type="number" step="0.01" required name="tmax6" class="form-control" value="{{ site.tmax6 }}"></td>
                                    <td><input type="number" step="0.01" required name="tmin6" class="form-control" value="{{ site.tmin6 }}"></td>
                                    <td><input type="number" step="0.01" required name="precip6" class="form-control" value="{{ site.precip6 }}"></td>
                                    <td><input type="number" step="0.01" required name="evap6" class="form-control" value="{{ site.evap6 }}"></td>
                                    <td><input type="number" step="0.01" required name="ra6" class="form-control" value="{{ site.ra6 }}"></td>
                                    <td><input type="number" step="0.01" required name="raind6" class="form-control" value="{{ site.raind6 }}"></td>
                                    <td><input type="number" step="0.01" required name="frost6" class="form-control" value="{{ site.frost6 }}"></td>
                                </tr>
                                <tr>
                                    <td>七月</td>
                                    <td><input type="number" step="0.01" required name="tmax7" class="form-control" value="{{ site.tmax7 }}"></td>
                                    <td><input type="number" step="0.01" required name="tmin7" class="form-control" value="{{ site.tmin7 }}"></td>
                                    <td><input type="number" step="0.01" required name="precip7" class="form-control" value="{{ site.precip7 }}"></td>
                                    <td><input type="number" step="0.01" required name="evap7" class="form-control" value="{{ site.evap7 }}"></td>
                                    <td><input type="number" step="0.01" required name="ra7" class="form-control" value="{{ site.ra7 }}"></td>
                                    <td><input type="number" step="0.01" required name="raind7" class="form-control" value="{{ site.raind7 }}"></td>
                                    <td><input type="number" step="0.01" required name="frost7" class="form-control" value="{{ site.frost7 }}"></td>
                                </tr>
                                <tr>
                                    <td>八月</td>
                                    <td><input type="number" step="0.01" required name="tmax8" class="form-control" value="{{ site.tmax8 }}"></td>
                                    <td><input type="number" step="0.01" required name="tmin8" class="form-control" value="{{ site.tmin8 }}"></td>
                                    <td><input type="number" step="0.01" required name="precip8" class="form-control" value="{{ site.precip8 }}"></td>
                                    <td><input type="number" step="0.01" required name="evap8" class="form-control" value="{{ site.evap8 }}"></td>
                                    <td><input type="number" step="0.01" required name="ra8" class="form-control" value="{{ site.ra8 }}"></td>
                                    <td><input type="number" step="0.01" required name="raind8" class="form-control" value="{{ site.raind8 }}"></td>
                                    <td><input type="number" step="0.01" required name="frost8" class="form-control" value="{{ site.frost8 }}"></td>
                                </tr>
                                <tr>
                                    <td>九月</td>
                                    <td><input type="number" step="0.01" required name="tmax9" class="form-control" value="{{ site.tmax9 }}"></td>
                                    <td><input type="number" step="0.01" required name="tmin9" class="form-control" value="{{ site.tmin9 }}"></td>
                                    <td><input type="number" step="0.01" required name="precip9" class="form-control" value="{{ site.precip9 }}"></td>
                                    <td><input type="number" step="0.01" required name="evap9" class="form-control" value="{{ site.evap9 }}"></td>
                                    <td><input type="number" step="0.01" required name="ra9" class="form-control" value="{{ site.ra9 }}"></td>
                                    <td><input type="number" step="0.01" required name="raind9" class="form-control" value="{{ site.raind9 }}"></td>
                                    <td><input type="number" step="0.01" required name="frost9" class="form-control" value="{{ site.frost9 }}"></td>
                                </tr>
                                <tr>
                                    <td>十月</td>
                                    <td><input type="number" step="0.01" required name="tmax10" class="form-control" value="{{ site.tmax10 }}"></td>
                                    <td><input type="number" step="0.01" required name="tmin10" class="form-control" value="{{ site.tmin10 }}"></td>
                                    <td><input type="number" step="0.01" required name="precip10" class="form-control" value="{{ site.precip10 }}"></td>
                                    <td><input type="number" step="0.01" required name="evap10" class="form-control" value="{{ site.evap10 }}"></td>
                                    <td><input type="number" step="0.01" required name="ra10" class="form-control" value="{{ site.ra10 }}"></td>
                                    <td><input type="number" step="0.01" required name="raind10" class="form-control" value="{{ site.raind10 }}"></td>
                                    <td><input type="number" step="0.01" required name="frost10" class="form-control" value="{{ site.frost10 }}"></td>
                                </tr>
                                <tr>
                                    <td>十一月</td>
                                    <td><input type="number" step="0.01" required name="tmax11" class="form-control" value="{{ site.tmax11 }}"></td>
                                    <td><input type="number" step="0.01" required name="tmin11" class="form-control" value="{{ site.tmin11 }}"></td>
                                    <td><input type="number" step="0.01" required name="precip11" class="form-control" value="{{ site.precip11 }}"></td>
                                    <td><input type="number" step="0.01" required name="evap11" class="form-control" value="{{ site.evap11 }}"></td>
                                    <td><input type="number" step="0.01" required name="ra11" class="form-control" value="{{ site.ra11 }}"></td>
                                    <td><input type="number" step="0.01" required name="raind11" class="form-control" value="{{ site.raind11 }}"></td>
                                    <td><input type="number" step="0.01" required name="frost11" class="form-control" value="{{ site.frost11 }}"></td>
                                </tr>
                                <tr>
                                    <td>十二月</td>
                                    <td><input type="number" step="0.01" required name="tmax12" class="form-control" value="{{ site.tmax12 }}"></td>
                                    <td><input type="number" step="0.01" required name="tmin12" class="form-control" value="{{ site.tmin12 }}"></td>
                                    <td><input type="number" step="0.01" required name="precip12" class="form-control" value="{{ site.precip12 }}"></td>
                                    <td><input type="number" step="0.01" required name="evap12" class="form-control" value="{{ site.evap12 }}"></td>
                                    <td><input type="number" step="0.01" required name="ra12" class="form-control" value="{{ site.ra12 }}"></td>
                                    <td><input type="number" step="0.01" required name="raind12" class="form-control" value="{{ site.raind12 }}"></td>
                                    <td><input type="number" step="0.01" required name="frost12" class="form-control" value="{{ site.frost12 }}"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 提交按钮区域 -->
            <div class="actions-container">
                <button type="button" class="btn btn-back" onclick="window.location.href='{{ url_for('func.mysites') }}'">
                    <i class="bi bi-x-lg"></i> 取消修改
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-lg"></i> 保存修改
                </button>
            </div>
        </form>
    </div>
    <div id="backToTop" class="back-to-top">
        <i class="bi bi-arrow-up"></i>
    </div>

    <script>
        $(document).ready(function() {
            // 初始化页面功能
            initPage();

            // 监听表单输入变化，自动更新统计数据
            setupInputListeners();

            // 监听表单提交
            $('#editSiteForm').on('submit', function(e) {
                return validateForm(e);
            });
        });

        // 初始化页面功能
        function initPage() {
            // 初始计算并显示统计数据
            updateStatistics();

            // 当窗口滚动时显示/隐藏返回顶部按钮
            $(window).scroll(function() {
                const scrollPosition = $(window).scrollTop();

                // 如果滚动超过300px，显示返回顶部按钮
                if (scrollPosition > 300) {
                    $('#backToTop').addClass('visible');
                } else {
                    $('#backToTop').removeClass('visible');
                }

                // 检测表格是否可滚动
                checkTableScroll();
            });

            // 添加返回顶部按钮功能
            $('#backToTop').click(function() {
                $('html, body').animate({ scrollTop: 0 }, 'slow');
                return false;
            });

            // 检测表格是否需要水平滚动
            checkTableScroll();
            $(window).resize(function() {
                checkTableScroll();
            });
        }

        // 检查表格是否可以水平滚动
        function checkTableScroll() {
            const tableContainer = $('.table-responsive');
            const table = tableContainer.find('table');

            if (table.width() > tableContainer.width()) {
                tableContainer.addClass('scrollable');
            } else {
                tableContainer.removeClass('scrollable');
            }
        }

        // 设置输入监听器
        function setupInputListeners() {
            // 监听所有数字输入框的变化
            $('input[type="number"]').on('input', function() {
                // 标记修改的字段
                $(this).addClass('modified-field');
                $(this).closest('tr').addClass('modified-row');

                // 更新统计数据
                updateStatistics();
            });

            // 输入框获得焦点时高亮整行
            $('input[type="number"]').on('focus', function() {
                $(this).addClass('focused');
                $(this).closest('tr').addClass('focused');
            });

            // 输入框失去焦点时移除高亮
            $('input[type="number"]').on('blur', function() {
                $(this).removeClass('focused');
                $(this).closest('tr').removeClass('focused');
            });

            // 键盘导航 - 按Enter或方向键移动到下一个或上一个输入框
            $('input[type="number"]').on('keydown', function(e) {
                handleInputNavigation(e, $(this));
            });
        }

        // 处理输入框之间的键盘导航
        function handleInputNavigation(e, input) {
            const allInputs = $('input[type="number"]');
            const currentIndex = allInputs.index(input);

            // Enter键移动到下一个输入框
            if (e.keyCode === 13) {
                e.preventDefault();
                if (currentIndex < allInputs.length - 1) {
                    allInputs.eq(currentIndex + 1).focus();
                }
            }

            // 下箭头 - 移动到下面的输入框（同一列）
            if (e.keyCode === 40) {
                e.preventDefault();
                const colIndex = input.closest('td').index();
                const nextRow = input.closest('tr').next('tr');
                if (nextRow.length) {
                    nextRow.find('td').eq(colIndex).find('input').focus();
                }
            }

            // 上箭头 - 移动到上面的输入框（同一列）
            if (e.keyCode === 38) {
                e.preventDefault();
                const colIndex = input.closest('td').index();
                const prevRow = input.closest('tr').prev('tr');
                if (prevRow.length && !prevRow.hasClass('header-row')) {
                    prevRow.find('td').eq(colIndex).find('input').focus();
                }
            }

            // 左箭头 - 移动到左边的输入框（同一行）
            if (e.keyCode === 37 && input.caret().start === 0) {
                e.preventDefault();
                const prevCell = input.closest('td').prev('td');
                if (prevCell.find('input').length) {
                    prevCell.find('input').focus();
                }
            }

            // 右箭头 - 移动到右边的输入框（同一行）
            if (e.keyCode === 39 && input.caret().start === input.val().length) {
                e.preventDefault();
                const nextCell = input.closest('td').next('td');
                if (nextCell.find('input').length) {
                    nextCell.find('input').focus();
                }
            }
        }

        // jQuery扩展 - 获取光标位置
        $.fn.caret = function() {
            const el = this[0];
            if (el.selectionStart || el.selectionStart === 0) {
                return {
                    start: el.selectionStart,
                    end: el.selectionEnd
                };
            }
            return {
                start: 0,
                end: 0
            };
        };

        // 更新统计数据
        function updateStatistics() {
            // 计算年均温
            let sumTemp = 0;
            let tMaxSum = 0;
            let tMinSum = 0;

            for (let i = 1; i <= 12; i++) {
                const tmax = parseFloat($(`input[name="tmax${i}"]`).val()) || 0;
                const tmin = parseFloat($(`input[name="tmin${i}"]`).val()) || 0;
                tMaxSum += tmax;
                tMinSum += tmin;
            }

            sumTemp = (tMaxSum + tMinSum) / 24;
            $('#avgTemp').text((sumTemp).toFixed(2) + ' ℃');

            // 计算年降水量
            let sumPrecip = 0;
            for (let i = 1; i <= 12; i++) {
                sumPrecip += parseFloat($(`input[name="precip${i}"]`).val()) || 0;
            }
            $('#totalPrecip').text(Math.round(sumPrecip) + ' mm');

            // 计算年雨日
            let sumRainDays = 0;
            for (let i = 1; i <= 12; i++) {
                sumRainDays += parseFloat($(`input[name="raind${i}"]`).val()) || 0;
            }
            $('#totalRainDays').text(Math.round(sumRainDays) + ' 天');

            // 计算年平均辐射
            let sumRadiation = 0;
            for (let i = 1; i <= 12; i++) {
                sumRadiation += parseFloat($(`input[name="ra${i}"]`).val()) || 0;
            }
            $('#avgRadiation').text((sumRadiation / 12).toFixed(2) + ' MJ/m²');
        }

        // 验证表单
        function validateForm(e) {
            let isValid = true;

            // 验证所有输入字段
            $('input[type="number"]').each(function() {
                const val = $(this).val().trim();

                // 检查是否为空
                if (val === '') {
                    showError($(this), '此字段不能为空');
                    isValid = false;
                    return;
                }

                // 检查是否为有效数字
                if (isNaN(parseFloat(val))) {
                    showError($(this), '请输入有效的数字');
                    isValid = false;
                    return;
                }

                // 特定字段的额外验证
                validateSpecificField($(this));
            });

            if (!isValid) {
                e.preventDefault();

                // 滚动到第一个错误字段
                const firstError = $('.is-invalid').first();
                if (firstError.length) {
                    $('html, body').animate({
                        scrollTop: firstError.offset().top - 100
                    }, 500);
                }

                return false;
            }

            // 显示提交状态
            showSubmittingStatus();
            return true;
        }

        // 验证特定字段
        function validateSpecificField(field) {
            const name = field.attr('name');
            const value = parseFloat(field.val());

            // 验证温度合理范围
            if (name.startsWith('tmax')) {
                if (value < -50 || value > 60) {
                    showError(field, '最高温度应在-50°C至60°C之间');
                    return false;
                }
            }

            if (name.startsWith('tmin')) {
                if (value < -60 || value > 50) {
                    showError(field, '最低温度应在-60°C至50°C之间');
                    return false;
                }

                // 验证最低温度不高于最高温度
                const month = name.replace('tmin', '');
                const tmaxValue = parseFloat($(`input[name="tmax${month}"]`).val());
                if (value > tmaxValue) {
                    showError(field, '最低温度不应高于最高温度');
                    return false;
                }
            }

            // 验证降水量不为负
            if (name.startsWith('precip') && value < 0) {
                showError(field, '降水量不能为负值');
                return false;
            }

            // 验证雨日和霜冻日合理范围
            if ((name.startsWith('raind') || name.startsWith('frost')) && (value < 0 || value > 31)) {
                showError(field, '天数应在0至31之间');
                return false;
            }

            // 验证太阳辐射合理范围
            if (name.startsWith('ra') && (value < 0 || value > 50)) {
                showError(field, '太阳辐射值应在0至50 MJ/m²之间');
                return false;
            }

            // 验证蒸发量不为负
            if (name.startsWith('evap') && value < 0) {
                showError(field, '蒸发量不能为负值');
                return false;
            }

            // 验证通过
            clearError(field);
            return true;
        }

        // 显示字段错误
        function showError(field, message) {
            // 清除之前的错误状态
            clearError(field);

            // 添加错误类和提示
            field.addClass('is-invalid');

            // 创建错误信息元素
            const errorDiv = $('<div class="invalid-feedback"></div>').text(message);
            field.after(errorDiv);
        }

        // 清除字段错误
        function clearError(field) {
            field.removeClass('is-invalid');
            field.next('.invalid-feedback').remove();
        }

        // 显示提交状态
        function showSubmittingStatus() {
            const submitBtn = $('button[type="submit"]');
            submitBtn.prop('disabled', true);
            submitBtn.html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>保存中...');

            // 如果提交成功，页面会刷新
            // 如果5秒后仍在同一页面，恢复按钮状态（可能有验证错误）
            setTimeout(function() {
                submitBtn.prop('disabled', false);
                submitBtn.html('<i class="bi bi-check-lg"></i> 保存修改');
            }, 5000);
        }
    </script>
</body>
</html>